<template>
  <div class="submit-tag-page">
    <h2>提交标签修改请求</h2>

    <div class="input-section">
      <label>题目编号：</label>
      <input
        v-model="problemNumber"
        @input="fetchProblemInfo"
        placeholder="请输入题目编号"
        :readonly="isAutoFilled"
      />
      <div v-if="problemInfo" class="problem-info-box">
        {{ problemInfo.problem_number }}: {{ problemInfo.problem_name }}
      </div>
    </div>

    <div class="input-section">
      <label>标签选择：</label>
      <select v-model="selectedTagIndex">
        <option disabled value="">请选择一个标签</option>
        <option v-for="tag in tags" :key="tag.index" :value="tag.index">
          {{ tag.tag_name }}
        </option>
      </select>
    </div>

    <div class="input-section">
      <label>操作类型：</label>
      <select v-model="actionType">
        <option disabled value="">请选择操作</option>
        <option value="1">添加标签</option>
        <option value="0">删除标签</option>
      </select>
    </div>

    <button @click="submitTagChangeRequest" :disabled="!isFormValid">
      提交请求
    </button>
  </div>
</template>

<script>
import axios from '@/axios';

export default {
  name: 'SubmitTagData',
  data() {
    return {
      problemNumber: this.$route.query.problem_number || '', // 从路由参数中获取问题编号
      problemInfo: null,
      tags: [],
      selectedTagIndex: '',
      actionType: '',
      isAutoFilled: !!this.$route.query.problem_number, // 判断是否是自动填充
    };
  },
  computed: {
    isFormValid() {
      return this.problemInfo && this.selectedTagIndex && this.actionType !== '';
    },
  },
  methods: {
    async fetchProblemInfo() {
      if (this.problemNumber.trim()) {
        try {
          const response = await axios.get(`/api/problems/${this.problemNumber}/`);
          this.problemInfo = response.data;
        } catch (error) {
          console.error('无法获取题目信息:', error);
          this.problemInfo = null;
        }
      } else {
        this.problemInfo = null;
      }
    },
    async fetchTags() {
      try {
        const response = await axios.get('/api/tag/');
        this.tags = response.data;
      } catch (error) {
        console.error('无法获取标签信息:', error);
      }
    },
    async submitTagChangeRequest() {
      try {
        const response = await axios.post('/api/moderation/submit_tag_change_request/', {
          problem_number: this.problemNumber,
          tag_index: this.selectedTagIndex,
          add_or_delete: this.actionType,
        });
        alert(response.data.message || '请求已提交');
        this.resetForm();
      } catch (error) {
        console.error('提交失败:', error);
        alert('提交失败，请重试');
      }
    },
    resetForm() {
      this.problemNumber = '';
      this.problemInfo = null;
      this.selectedTagIndex = '';
      this.actionType = '';
      this.isAutoFilled = false; // 重置后可以手动输入
    },
  },
  mounted() {
    this.fetchTags();
    if (this.problemNumber) {
      this.fetchProblemInfo();
    }
  }
};
</script>

<style scoped>
.submit-tag-page {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.input-section {
  margin-bottom: 15px;
}

input,
select {
  padding: 8px;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-top: 5px;
}

.problem-info-box {
  margin-top: 10px;
  padding: 10px;
  background-color: #e9f7fe;
  border-radius: 4px;
  border: 1px solid #007bff;
  color: #007bff;
}

button {
  padding: 10px 15px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  width: 100%;
  margin-top: 10px;
}

button:disabled {
  background-color: #ddd;
  cursor: not-allowed;
}
</style>
